<template>
  <app-page>
    <div class="home_index">
      <Menu :menus="menus" :activeMenu="activeMenu" />
      <List :activeMenu="activeMenu"/>
    </div>
  </app-page>
</template>

<script setup>
import Menu from "./components/Menu.vue";
import List from "./components/List.vue";

import homeImg from "@/assets/home/menu/home.png";
import homeImg_active from "@/assets/home/menu/home_active.png";
import collectImg from "@/assets/home/menu/collect.png";
import collectImg_active from "@/assets/home/menu/collect_active.png";
import recentlyImg from "@/assets/home/menu/recently.png";
import recentlyImg_active from "@/assets/home/menu/recently_active.png";
import groupImg from "@/assets/home/menu/group.png";
import groupImg_active from "@/assets/home/menu/group_active.png";
import meImg from "@/assets/home/menu/me.png";
import meImg_active from "@/assets/home/menu/me_active.png";
import apiImg from "@/assets/home/menu/api.png";
import apiImg_active from "@/assets/home/menu/api_active.png";

const route = useRoute();
const menus = ref([
  {
    value: 'myAmbient',
    label: '我的环境',
    icon: homeImg,
    icon_active: homeImg_active
  }, {
    value: 'inAmbient',
    label: '常用环境',
    icon: collectImg,
    icon_active: collectImg_active
  }, {
    value: 'recentlyOpened',
    label: '最近打开',
    icon: recentlyImg,
    icon_active: recentlyImg_active
  }, 
  // {
  //   value: 'ambientGroup',
  //   label: '环境分组',
  //   icon: groupImg,
  //   icon_active: groupImg_active
  // }, {
  //   value: 'myAccount',
  //   label: '我的账号',
  //   icon: meImg,
  //   icon_active: meImg_active
  // }, {
  //   value: 'api',
  //   label: 'API',
  //   icon: apiImg,
  //   icon_active: apiImg_active
  // },
])

const activeMenu = ref({
  value: 'myAmbient',
  label: '我的环境'
})

onMounted(() => {
  console.log(route.query);

  if (route.query.manager) {
    menus.value.forEach(item => {
      if (item.value == route.query.manager) {
        activeMenu.value = {
          value: item.value,
          label: item.label
        }
      }
    });
  }
  
})

</script>

<style lang="scss" scoped>
.home_index {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>